<template>
  <div>
    <a-row :gutter="24">
      <template v-for="(graphType,index) in graphTypeDictOptions">
        <a-col :xl="col.xl" :lg="col.lg" :md="col.md" :sm="col.sm" :key="index">
          <pie @click="handleChartClick(arguments,'pie')" v-if="graphType.value === 'pie'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField"></pie>
          <bar-multid @click="handleChartClick(arguments,'bar')" v-else-if="graphType.value === 'bar'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></bar-multid>
          <transverse-bar-muiltid @click="handleChartClick(arguments,'transverseBar')" v-else-if="graphType.value === 'transverseBarMuiltid'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></transverse-bar-muiltid>
          <line-chart-multid @click="handleChartClick(arguments,'line')" v-else-if="graphType.value === 'line'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')" ></line-chart-multid>
          <radar @click="handleChartClick(arguments,'radar')" v-else-if="graphType.value === 'radar'" :dataSource="chartData" :fields="head.yaxisField.split(',')" :xaxisField="head.xaxisField"></radar>
          <funnel @click="handleChartClick(arguments,'funnel')" v-else-if="graphType.value === 'funnel'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField" ></funnel>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
import Pie from '@/components/chart/Pie'
import BarMultid from '@/components/chart/BarMultid'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransverseBarMuiltid from '@/components/chart/TransverseBarMuiltid'
import Radar from '@/components/chart/Radar'
import Funnel from '@/components/chart/Funnel'
export default {
  name: 'RowGraphreportAutoChart',
  components: {
    Pie,
    BarMultid,
    LineChartMultid,
    TransverseBarMuiltid,
    Radar,
    Funnel
  },
  props: ['chartData', 'head', 'graphTypeDictOptions', 'col'],
  methods: {
    handleChartClick(msg, type) {
      if (this.head.extendJs) {
        this.chartClick(type, msg)
      }
    },
    chartClick(type, msg) {
      var onClick = {}
      eval(this.head.extendJs)
      if (onClick && onClick[type]) {
        onClick[type].call(this, msg)
      }
    }
  }
}
</script>
<style scoped>

</style>
